<template>
  <div>
    <van-nav-bar title="提前还款" left-arrow @click-left="$router.back()"></van-nav-bar>
    <div class="loanBox">
      <div class="product_main">
        <div class="card-item">
          <div class="item-title">应还本息</div>
          <div class="item-value">{{ abTools.comdify(paymentInfo.totalAmt) }} 元</div>
        </div>
        <div class="card-item">
          <div class="item-title">借款本金</div>
          <div class="item-value">{{ abTools.comdify(paymentInfo.capitalAmt) }} 元</div>
        </div>
        <div class="card-item">
          <div class="item-title">贷款利息</div>
          <div class="item-value">{{ abTools.comdify(paymentInfo.interestAmt) }} 元</div>
        </div>
        <div class="card-item">
          <div class="item-title">欠款期限</div>
          <div class="item-value">{{dura}} 期</div>
        </div>
      </div>
      <div class="product_main" style="margin-bottom: 7.3rem;">
        <div class="early-title">还款金额</div>
        <div class="early-price"><span>¥</span> {{ abTools.comdify(paymentInfo.totalAmt) }}</div>
        <div class="early-Chinese">{{paymentInfo.totalAmt | ab_convertCurrency}}</div>
        <div class="card-item">
          <div class="item-title">还款账户</div>
          <div class="item-value">
            <van-field readonly clickable :value="value.name+'（'+value.code.substring(value.code.length - 4, value.code.length)+'）'" placeholder="请选择" style="padding: 0;" @click="showPicker = true"/>
            <van-icon name="arrow" style="position: absolute;right: 0;top: 50%;margin-top: -0.7rem;font-size: 1.4rem;color: rgba(29, 33, 41, 0.54);" />
          </div>
        </div>
        <div class="card-item">
          <div class="item-title">账户余额</div>
          <div class="item-value">{{ abTools.comdify(value.price) }} 元</div>
        </div>
      </div>
    </div>
    <div class="bottom_btn" @click="repaymentClick">立即还款</div>
    <van-popup v-model="showPicker" position="bottom" round :style="{ height: '40%' }">
      <van-nav-bar title="选择还款账户" left-text="取消" @click-left="showPicker = false"></van-nav-bar>
      <div class="select-repayment-account">
        <div class="repayment-li" v-for="item in bankList" :key="item.id" @click="selectBank(item)">
          <div>
            <div class="repayment-icon" v-if="item.code != value.code"> <van-icon name="card" /> </div>
            <van-icon v-else name="checked" />
          </div>
          <div class="repayment-bank">
            <div>{{item.code}}</div>
            <p>{{item.name}}</p>
          </div>
        </div>
      </div>
    </van-popup>
    <paymentPass v-if="modelShow" ref="paymentPass" :modelShow.sync="modelShow" :cardNumber="cardNumber" :instIds="instIds" ></paymentPass>
  </div>
</template>
<script>
import Vue from 'vue';
import paymentPass from "@/view/loanPage/paymentPass.vue";
export default {
  components: {paymentPass},
  data: function () {
    return {
      InstanceStatus: null,
      dataList: [],
      searchParam: {
        id: this.$route.query.id
      },
      columns: ['建设银行', '邮政银行', '民生'],
      value: {code: '6217******1793', name:'农商银行',price:'2838234.23'},
      showPicker: false,
      paymentInfo: '',
      bankList: [
        {code: '6217******1793', name:'农商银行',price:'2838234.23'},
        {code: '6217******1231', name:'农商银行',price:'1357834.23'},
        {code: '6217******6786', name:'农商银行',price:'566234.23'},
      ],
      modelShow: false,
      instIds:'',
      cardNumber:'',
    }
  },
  created: function () {
    this.getPaymentInfo();
    this.dura = this.$route.query.dura
  },
  methods: {
    // 借据信息
    getPaymentInfo() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/getPaymentInfo', this.searchParam).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          this.paymentInfo = res.data;
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    repaymentClick(){
      this.instIds = this.paymentInfo.instId;
      this.cardNumber = this.value.name+'（'+this.value.code.substring(this.value.code.length - 4, this.value.code.length)+'）';
      this.modelShow = true;
    },
    // 选择还款账户
    selectBank(item){
      this.value = item;
      this.showPicker = false;
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .van-nav-bar {
  .van-nav-bar__content {
    height: 4.4rem;
    line-height: 2rem;

    .van-icon {
      color: rgb(50, 50, 51);
      font-size: 2rem;
    }

    .van-nav-bar__text{
      color: rgb(134, 144, 156);
    }

    .van-nav-bar__title {
      font-size: 1.8rem;
    }
  }
}

[class*=van-hairline]::after {
  border: 0;
}

/*样式start*/
.loanBox{
  overflow-y: auto;
  height: calc(~'100vh - 4.4rem');
}
.product_main {
//   overflow-y: auto;
  // height: calc(~'100vh - 8.6rem');
  background-color: #FFF;
  border-radius: 1.2rem;
  padding: 0 1.6rem;
  margin: 1.2rem;
  .card-item {
    display: flex;
    align-items: center;
    min-height: 2.2rem;
    color: rgba(29, 33, 41, 0.54);
    font-size: 1.6rem;
    box-sizing: border-box;
    overflow: hidden;
    border-top: 1px solid rgba(229, 230, 235, 0.5);
    padding: 1.6rem 0;
    position: relative;

    .item-value {
      color: rgb(29, 33, 41);
      font-size: 1.6rem;
      margin-left: 1.6rem;
      flex: 1;
      /deep/.van-cell{
        font-size: 1.6rem;
        color: rgb(29, 33, 41);
        &::after{
          border: 0;
        }
      }
      /deep/.van-icon{
        color: rgb(201, 205, 212);
      }
    }
  }
  .early-title{
    font-size: 1.6rem;
    line-height: 1.9rem;
    color: rgb(29, 33, 41);
    padding-top: 1.6rem;
  }
  .early-price{
    font-size: 3.6rem;
    line-height: 4.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 2rem 0;
    span{
      font-weight: 400;
    }
  }
  .early-Chinese{
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: rgb(78, 89, 105);
    background: rgb(242, 243, 245);
    padding: 0.2rem 1.2rem;
    margin-bottom: 1.6rem;
  }
}
.bottom_btn{
  width: calc(~'100% - 2.4rem');
  height: 4.4rem;
  margin: 1.8rem 1.2rem;
  background: linear-gradient(270.00deg, var(--primary-color), var(--gradient2-color));
  border-radius: 4rem;
  color: rgb(255, 255, 255);
  font-family: HarmonyOS Sans SC;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 4.4rem;
  letter-spacing: 0%;
  text-align: center;
  position: absolute;
  bottom: 0;
}
/*样式end*/
.select-repayment-account{
  height: calc(~'100% - 6.8rem');
  border-top: 1px solid rgb(242, 242, 242);
  padding: 1.2rem 2rem;
  overflow: auto;

  .repayment-li{
    padding: 0.8rem 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(229, 230, 235, 0.5);
    .repayment-icon{
      width: 2.8rem;
      height: 2.8rem;
      border: 1px solid var(--primary-color);
      color: var(--primary-color);
      border-radius: 50%;
      margin-right: 1.6rem;
      display: flex;
      align-items: center;
      justify-content: center;

      /deep/.van-icon{
        font-size: 1.8rem;
      }
    }
    /deep/.van-icon{
      &.van-icon-checked{
        font-size: 3rem;
        color: var(--primary-color);
        margin-right: 1.6rem;
      }
    }
    .repayment-bank{
      width: calc(~'100% - 4.4rem');
      div{
        font-size: 1.6rem;
        line-height: 2.2rem;
        font-weight: 500;
      }
      p{
        font-size: 1.4rem;
        line-height: 2.2rem;
        color: rgba(29, 33, 41, 0.54);
      }
    }
  }
}
</style>
